<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
      <el-form-item label="名称" prop="name">
        <el-input v-model.trim="queryParams.name" placeholder="请输入名称" clearable style="width: 240px"
          @keyup.enter="handleQuery" @clear="handleQuery" @input="handleInput" />
      </el-form-item>
      <el-form-item label="规格/型号" prop="specifications" label-width="100px">
        <el-input v-model.trim="queryParams.specifications" placeholder="请输入规格/型号" clearable style="width: 240px"
          @keyup.enter="handleQuery" @clear="handleQuery" @input="handleInput" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="level">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5" v-if="level">
        <el-button type="success" plain icon="Finished" :disabled="multiple" @click="open2=true">合并</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>
    <!-- 表格数据 -->
    <el-table v-loading="loading" size="large" :max-height="tableHeight" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" label="选择" width="55" align="center" />
      <el-table-column label="名称" prop="name" align="center" width="250">
        <template #default="scope">
          <span>{{ scope.row.name || '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格" v-if="columns[0].visible" prop="specifications" align="center" width="200" />
      <el-table-column label="型号" v-if="columns[1].visible" prop="types" align="center" width="200" />
      <el-table-column label="制造厂商" v-if="columns[2].visible" prop="manufacturer" align="center" width="200" />
      <el-table-column label="颜色" v-if="columns[3].visible" prop="colors" align="center" width="100" />
      <el-table-column label="成本(元)" v-if="columns[4].visible" prop="price.cost1" align="center" width="100"  />
      <el-table-column label="单价(元)" v-if="columns[5].visible" prop="price.price1Show" align="center" width="100" />
      <el-table-column fixed="right" label="操作" align="center" min-width="160px" class-name="small-padding fixed-width" >
        <template #default="scope" v-if="level">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
    
       <!-- 添加或修改角色配置对话框 -->
       <el-dialog title="请选择合并后保留的一个数据项" v-model="open2" width="900px" append-to-body :close-on-click-modal="false">
      <el-table  size="large" :max-height="500" :data="selectionList">
        <el-table-column width="120" align="center">
          <template #header>
            <span class="select-header">请选择保留项</span>
          </template>
          <template #default="scope">
            <el-radio-group v-model="selectedItemId" @change="handleRadioChange">
              <el-radio :value="scope.row.id" size="large"  class="custom-radio"></el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" align="center"  width="300">
          <template #default="scope">
            <span>{{ scope.row.name || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格"  prop="specifications" align="center" width="250" />
        <!-- <el-table-column label="型号"  prop="types" align="center" width="200" /> -->
        <!-- <el-table-column label="制造厂商" v-if="columns[2].visible" prop="manufacturer" align="center" width="200" /> -->
        <!-- <el-table-column label="颜色"  prop="colors" align="center" width="100" /> -->
        <el-table-column label="成本(元)"  prop="price.cost1" align="center" width="100" />
        <el-table-column label="单价(元)"  prop="price.price1Show" align="center" width="100" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <!-- 根据 selectedItem 是否存在控制按钮禁用状态 -->
          <el-button type="primary" @click="submitForm2" :disabled="!selectedItem">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" v-model="open" width="900px" append-to-body :close-on-click-modal="false">
      <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="form.name" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格" prop="specifications">
              <template #label>
                <span class="required-star">*</span> 规格
              </template>
              <el-input v-model.trim="form.specifications" placeholder="请输入规格" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="types">
              <template #label>
                <span class="required-star">*</span> 型号
              </template>
              <el-input v-model.trim="form.types" placeholder="请输入型号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="曾用名">
              <el-input v-model="form.reName" placeholder="请输入曾用名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分类">
              <el-cascader v-model="form.classCode" ref="cascaderRef" :options="options"
                :props="{ checkStrictly: true, emitPath: false, children: 'children', value: 'classCode', label: 'className', }"
                :show-all-levels="false" @change="handleCascaderChange" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料号">
              <el-input v-model="form.classNum" :disabled="true" placeholder="自动生成" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源">
              <el-select v-model="form.resource" placeholder="请选择" style="width: 240px">
                <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类别">
              <el-select v-model="form.styles" placeholder="请选择" style="width: 240px">
                <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="等级">
              <el-select v-model="form.level" placeholder="请选择" style="width: 240px">
                <el-option v-for="item in options4" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="颜色">
              <el-input v-model="form.colors" placeholder="请输入颜色" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量">
              <el-input-number v-model="form.remaining" :min="0" :max="100000000" step-strictly>
                <template #suffix>
                  <span>{{ form.unit_V || '' }}</span>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位">
              <el-select v-model="form.unit" placeholder="请选择" style="width: 240px" @change="changeOpt5">
                <el-option v-for="item in options5" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="厂商">
              <el-input v-model="form.manufacturer" placeholder="请输入厂商" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="条码">
              <el-input v-model="form.barcode" placeholder="请输入条码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库">
              <el-select v-model="form.repository" placeholder="请选择" style="width: 240px">
                <el-option v-for="item in options6" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购时长">
              <el-input-number v-model="form.takeTime" :min="0" :max="100" step-strictly>
                <template #suffix>
                  <span>小时</span>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安全阈值">
              <el-input-number v-model="form.warmLevel" :min="0" :max="100" step-strictly>
                <template #suffix>
                  <span>{{ form.unit_V || '' }}</span>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- 添加分隔线 -->
            <el-divider content-position="left">价格</el-divider>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本" prop="price.cost">
              <el-input-number 
                v-model="displayCost" 
                :step="costUnit_=== '元' ? 0.01 : 1" 
                :step-strictly="costUnit_=== '分'? true : false"
                :max="100000000" 
                :precision="costUnit_=== '元' ? 2 : 0" 
                @change="updateSellingPrice"
              > 
                <template #suffix>
                  <el-dropdown @command="handleCommand" trigger="click">
                    <span>{{ costUnit_ }}
                      <el-icon size="10"><ArrowDown /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="分">分</el-dropdown-item>
                        <el-dropdown-item command="元">元</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税率" prop="price.taxRate">
              <el-input-number v-model="form.price.taxRate" :step="0.1" :precision="4" :max="100000000"
                @change="updateSellingPrice">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="利润率" prop="price.profitRate">
              <el-input-number v-model="form.price.profitRate" :step="0.1" :precision="4" :max="100000000"
                @change="updateSellingPrice">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折扣率" prop="price.discount">
              <el-input-number v-model="form.price.discount" :step="0.1" :precision="4" :max="100000000"
                @change="updateSellingPrice">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优惠" prop="price.preferential">
              <el-input-number v-model="form.price.preferential" step-strictly :max="100000000"
                @change="updateSellingPrice">
                <template #suffix>
                  <span>分</span>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="售价">
              <el-input-number v-model="form.price.price1Show" :disabled="true" :precision="3" :max="100000000">
                <template #suffix>
                  <span>元</span>
                </template>
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Role">
import { useInfoStore } from '@/store/modules/info.js'
const userInfo = useInfoStore();
const level = useInfoStore().info?.role?.level>1?false:true;

const router = useRouter();
const { proxy } = getCurrentInstance();
// const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const tableHeight = ref(document.documentElement.scrollHeight - 280 + "px");


const dataList = ref([]);
const open = ref(false);
const open2 = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const selectionList = ref([]);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const menuOptions = ref([]);
const deptOptions = ref([]);
const openDataScope = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);
const options = ref([]);
const options2 = ref([]);
const options3 = ref([]);
const options4 = ref([]);
const options5 = ref([]);
const options6 = ref([]);
const cascaderRef = ref(null);
const costUnit_ = ref('元');//成本显示单位 默认元
// 新增响应式变量，用于存储选中项的 id
const selectedItemId = ref(null);
// 新增响应式变量，用于存储选中项
const selectedItem = ref(null);

// 列显隐信息
const columns = ref([
  { key: 0, label: `规格`, visible: true },
  { key: 1, label: `型号`, visible: false },
  { key: 2, label: `制造厂商`, visible: true },
  { key: 3, label: `颜色`, visible: true },
  { key: 4, label: `成本`, visible: true },
  { key: 5, label: `单价	`, visible: true },
]);
const data = reactive({
  form: {
    id: null,//新增为空
    classCode: null,//分类型号
    classNum: null,//物料号
    name: null,//名称
    reName: null,//曾用名
    resource: null,//来源
    specifications: null,//规格
    types: null,//型号
    styles: null,//类别
    colors: null,//颜色
    level: null,//等级
    remaining: 0,//库存单位数量
    unit: null,//单位
    unit_V: '单位',//单位名称
    manufacturer: null,//制造商/厂商
    barcode: null,//条码/二维码
    warmLevel: 0,//安全阈值
    takeTime: 0,//采购花费时间
    price: {//价格
      cost: 0,//成本
      profitRate: 1,//利润率(百分比)
      taxRate: 1,//税率(百分比)
      discount: 1,//折扣率(百分比)
      preferential: 0,//优惠的
      price1Show: 0,//售价
    },
    repository: null,//仓库代码
  },
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    classCode: null,//分类型号
    name: null,//名称
    specifications: null,//规格
    types: null,//型号
    manufacturer: null,//制造商/厂商`
  },
  rules: {
    name: [{ required: true, message: "物料名称不能为空", trigger: "blur" }],
    'price.cost': [{ required: true, message: "成本不能为空", trigger: "blur" }],
    'price.taxRate': [{ required: true, message: "税率不能为空", trigger: "blur" }],
    'price.profitRate': [{ required: true, message: "利润率不能为空", trigger: "blur" }],
    'price.discount': [{ required: true, message: "折扣率不能为空", trigger: "blur" }],
    'price.preferential': [{ required: true, message: "优惠不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

// 自定义校验函数
const validateTypeOrSpec = (rule, value, callback) => {
  if (!form.value.types && !form.value.specifications) {
    callback(new Error('型号和规格至少输入一项'));
  } else {
    callback();
  }
};
// 更新校验规则
rules.value.types = { validator: validateTypeOrSpec, trigger: 'blur' };
rules.value.specifications = { validator: validateTypeOrSpec, trigger: 'blur' };

// 新增计算属性
const displayCost = computed({
  get() {
    if (costUnit_.value === '元') {
      // 为了避免浮点数精度问题，将分转换为元时先除以 100 再取整
      return Math.round(form.value.price.cost) / 100;
    }
    return form.value.price.cost;
  },
  set(newValue) {
    if (costUnit_.value === '元') {
      // 为了避免浮点数精度问题，将元转换为分时先乘以 100 再取整
      form.value.price.cost = Math.round(newValue * 100);
    } else {
      form.value.price.cost = newValue;
    }
    updateSellingPrice();
  }
});

// 修改 handleCommand 函数
function handleCommand(e) {
  costUnit_.value = e;
  // 不需要再修改 form.value.price.cost 的原始值
  // 触发售价更新
  updateSellingPrice();
}

/** 手动关闭 */
function handleCascaderChange(e) {
  // 主动关闭弹层
  cascaderRef.value.togglePopperVisible(false)
}
function formatCost(row) {
  const cost = row.price.cost / 100;
  return cost % 1 === 0 ? cost.toFixed(0) : cost.toFixed(2);
}

function updateSellingPrice() {
  // 成本监听逻辑 （当成本大于5000时，利润率为1.33，否则为1.35）
  // if (form.value.price.cost >= 5000) {
  //   form.value.price.profitRate = 1.33;
  // } else {
  //   form.value.price.profitRate = 1.35;
  // }
  const { cost, taxRate, profitRate, discount, preferential } = form.value.price;
  const price1Show = (cost * taxRate * profitRate * discount - preferential) / 100;
  // 修改此处，保留三位小数，最后一位四舍五入
  form.value.price.price1Show = parseFloat(price1Show.toFixed(3));
}

 /** 多选框选中数据 */
function handleSelectionChange(selection) {
  selectionList.value = selection;
  console.log("🚀 ~ handleSelectionChange ~ selectionList.value:", selectionList.value)
  ids.value = selection.map(item => item.dictId);
  multiple.value = selection?.length<2;
}
// 单选框选中数据处理函数
function handleRadioChange(id) {
  selectedItem.value = selectionList.value.find(item => item.id === id);
}
// 合并
function submitForm2(){
  console.log(selectedItem.value);
  // 直接取出ids
  const delList = selectionList.value.filter(item => item.id !== selectedItem.value.id).map(item => item.id);
  proxy.quote_API.MergeMaterial(delList).then(response => {
    proxy.$modal.msgSuccess("合并成功");
    open2.value = false;
    getList();
  }).finally(() => {
      loading.value = false;
    })
}

/** 查询角色列表 */
function getList() {
  loading.value = true;
  proxy.quote_API.GetMaterialPageList(queryParams.value).then(response => {
    dataList.value = response.data.list;
    total.value = response.data.total;
    loading.value = false;
  });
}
// 输入时触发的防抖处理函数
let timer = null;
function handleInput() {
  clearTimeout(timer);
  timer = setTimeout(handleQuery, 300);
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除物料"' + row.name + '"的数据项?').then(function () {
    // 物料有价格对象属性--- 使用价格id 删除价格和物料
    if (row?.price?.id) {
      proxy.quote_API.DeletePrice({
        id: row.price.id,
      }).then(response => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      });
    } else {
      proxy.quote_API.DeleteMaterial({
        id: row.id,
      }).then(response => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      });
    }

  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/role/export", {
    ...queryParams.value,
  }, `role_${new Date().getTime()}.xlsx`);
}


/** 重置新增的表单以及其他数据  */
function reset() {
  if (menuRef.value != undefined) {
    menuRef.value.setCheckedKeys([]);
  }
  form.value = {
    id: null,//新增为空
    classCode: null,//分类型号
    classNum: null,//物料号
    name: null,//名称
    reName: null,//曾用名
    resource: null,//来源
    specifications: null,//规格
    types: null,//型号
    styles: null,//类别
    colors: null,//颜色
    level: null,//等级
    remaining: 0,//库存单位数量
    unit: null,//单位
    unit_V: '单位',//单位名称
    manufacturer: null,//制造商/厂商
    barcode: null,//条码/二维码
    warmLevel: 0,//安全阈值
    takeTime: 0,//采购花费时间
    price: {//价格
      cost: 0,//成本
      profitRate: 1,//利润率(百分比)
      taxRate: 1,//税率(百分比)
      discount: 1,//折扣率(百分比)
      preferential: 0,//优惠的
      price1Show: 0,//售价
    },
    repository: null,//仓库代码
  };
  costUnit_.value = '元';
  proxy.resetForm("roleRef");
}
/** 新增物料 */
function handleAdd() {
  reset();
  getAlldata();
  open.value = true;
  title.value = "新增物料";
}

/** 修改物料 */
function handleUpdate(row) {
  let newRow = JSON.parse(JSON.stringify(row));
  reset();
  Object.keys(form.value).forEach(key => {
    form.value[key] = newRow[key];
    if (newRow['price'] == null) {
      form.value['price'] = {
        cost: 0,//成本
        profitRate: 1,//利润率(百分比)
        taxRate: 1,//税率(百分比)
        discount: 1,//折扣率(百分比)
        preferential: 0,//优惠的
        price1Show: 0,//售价
      };
    }
  });
  // 修改 补缺默认类型
  getAlldata();
  open.value = true;
  title.value = "修改物料";
}

/** 根据角色ID查询菜单树结构 */
function getRoleMenuTreeselect(roleId) {
  return roleMenuTreeselect(roleId).then(response => {
    menuOptions.value = response.menus;
    return response;
  });
}

/** 根据角色ID查询部门树结构 */
function getDeptTree(roleId) {
  return deptTreeSelect(roleId).then(response => {
    deptOptions.value = response.depts;
    return response;
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["roleRef"].validate(valid => {
    if (valid) {
      // 过滤所有空字符串
      // Object.keys(form.value).forEach(key => {
      //   if (form.value[key] === '') {
      //     form.value[key] = null;
      //   }
      // });
      if (form.value.id) {
        proxy.quote_API.EditMaterials({
          ...form.value,
        }).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        proxy.quote_API.AddMaterials({
          ...form.value,
        }).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
// 复制
async function copy(text) {
  console.log(text);
  try {
    await navigator.clipboard.writeText(text);
    proxy.$modal.msgSuccess('复制成功');
  } catch (err) {
    console.log(err);

  }
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 数据名称-动态联动 */
function changeOpt5(e) {
  form.value.unit_V = options5.value.filter(item => item.id === e)[0].name || '';
}
/** 分类字典数据 */
function getAlldata() {
  // 分类--树数据
  proxy.quote_API.GetClassCodeByGroup({
  }).then(response => {
    response.data.forEach(element => {
      element.children = []
    })
    const data = proxy.handleTree(response.data, 'classCode', 'groupCode');
    options.value = data[0].children || [];
    form.value.classCode = form.value.classCode ? form.value.classCode : options.value[0].classCode; //没有就默认第一项
  });
  // 字典数据--物料来源
  proxy.quote_API.GetCodeForDPL({
    code_Group: 1
  }).then(response => {
    options2.value = response.data || [];
    form.value.resource = form.value.resource ? form.value.resource : options2.value[0].id; //默认第一项
  });
  // 字典数据--物料类别
  proxy.quote_API.GetCodeForDPL({
    code_Group: 2
  }).then(response => {
    options3.value = response.data || [];
    form.value.styles = form.value.styles ? form.value.styles : options3.value[0].id; //默认第一项
  });
  // 字典数据--物料等级
  proxy.quote_API.GetCodeForDPL({
    code_Group: 3
  }).then(response => {
    options4.value = response.data || [];
    form.value.level = form.value.level ? form.value.level : options4.value[0].id; //默认第一项
  });
  // 字典数据--物料单位
  proxy.quote_API.GetCodeForDPL({
    code_Group: 4
  }).then(response => {
    options5.value = response.data || [];
    form.value.unit = form.value.unit ? form.value.unit : options5.value[0].id; //默认第一项
    form.value.unit_V = form.value.unit_V ? form.value.unit_V : options5.value[0].name; //默认第一项
  });
  // 字典数据--物料仓库
  proxy.quote_API.GetCodeForDPL({
    code_Group: 6
  }).then(response => {
    options6.value = response.data || [];
    form.value.repository = form.value.repository ? Number(form.value.repository) : options6.value[0].id; //默认第一项
  });
}

getList();
getAlldata();
</script>

<style lang="scss" scoped>
.el-input-number {
  width: 190px;
}

.required-star {
  color: #F56C6C;
  margin-right: 4px;
}
:deep(.custom-radio) {
  margin-right: 0;

  .el-radio__inner {
    width: 20px;
    height: 20px;

    &::after {
      width: 8px;
      height: 8px;
    }
  }
}
.select-header {
  color: #409EFF;
  font-weight: bold;
}
</style>